<template>
	<view class="coupon-list">
		<nav-bar title="我的优惠券" backUrl="/pages/my/my" :isTabbar="true" />
		<view class="status-tabs">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }"
				@tap="switchTab(index)">
				<text>{{ tab.name }}</text>
				<text class="count">({{ tab.count }})</text>
				<view class="tab-line" v-if="currentTab === index"></view>
			</view>
		</view>
		<view class="coupon-container">
			<view class="coupon-item" v-for="(coupon, index) in coupons" :key="index">
				<view class="left-section">
					<text class="currency">¥</text>
					<text class="amount">{{ coupon.coupons.amount }}</text>
				</view>
				<view class="right-section">
					<view class="coupon-title">{{ coupon.coupons.title }}</view>
					<view class="coupon-limit">{{ coupon.coupons.limitDesc?coupon.coupons.limitDesc:"没有限制"}}</view>
					<view class="coupon-date">有效期至：{{ coupon.expireTime }}
					</view>
					<view class="use-btn" @tap="useCoupon(coupon)" v-if="currentTab === 0">去使用</view>
					<view class="status-text" v-else>{{ getStatusText(coupon.status) }}</view>
				</view>
			</view>
			<view class="no-data" v-if="coupons.length === 0">
				<view class="empty-state">
					<text class="empty-text">暂无</text>
					<image class="empty-icon" src="/static/box.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				currentTab: 0,
				tabs: [{
						name: '未使用',
						count: 0,
						btnName: '去使用'
					},
					{
						name: '已使用',
						count: 0,
						btnName: '已使用'
					},
					{
						name: '已过期',
						count: 0,
						btnName: '已过期'
					}
				],
				coupons: [],
				data: {}
			}
		},
		onLoad() {
			this.loadCoupons()
		},
		methods: {
			loadCoupons() {
				const userInfo = uni.getStorageSync('userInfo')
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: `${uni.$config.baseUrl}/usercoupons/usercoupons/get-all-status-list`,
					method: 'POST',
					data: {
						userId: userInfo.memberId
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							this.data = res.data.data
							this.tabs[0].count = this.data.notUsedCount
							this.tabs[1].count = this.data.usedAlreadyCount
							this.tabs[2].count = this.data.expiredCount
							this.switchTab(this.currentTab)
						} else {
							uni.showToast({
								title: res.data.msg || '获取优惠券列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			updateTabCounts() {
				// 计算各状态优惠券数量
				const counts = {
					unused: 0,
					used: 0,
					expired: 0
				}
				this.coupons.forEach(coupon => {
					if (coupon.status === 0) counts.unused++
					else if (coupon.status === 1) counts.used++
					else if (coupon.status === 2) counts.expired++
				})
				// 更新标签数量
				this.tabs[0].count = counts.unused
				this.tabs[1].count = counts.used
				this.tabs[2].count = counts.expired
			},
			switchTab(index) {
				this.currentTab = index
				switch (this.currentTab) {
					case 0:
						this.coupons = this.data.notUsedList
						break
					case 1:
						this.coupons = this.data.usedAlreadyList
						break
					case 2:
						this.coupons = this.data.expiredList
				}
			},
			showDetails(coupon) {
				uni.showToast({
					title: '查看优惠券详情',
					icon: 'none'
				})
			},
			useCoupon(coupon) {
				uni.navigateTo({
					url: `/pages/project-list/project-list`
				})
			},
			followAccount() {
				uni.showToast({
					title: '关注公众号',
					icon: 'none'
				})
			},
			getStatusText(status) {
				return this.tabs[status].btnName
			}
		}
	}
</script>

<style lang="scss">
	.coupon-list {
		min-height: 100vh;
		background: #F8F8F8;

		.nav-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background: #FFFFFF;

			.back-icon {
				font-size: 40rpx;
				color: #333;
				padding: 10rpx;
			}

			.title {
				font-size: 36rpx;
				color: #333;
				font-weight: 500;
			}

			.more-icon {
				font-size: 40rpx;
				color: #333;
				padding: 10rpx;
			}
		}

		.status-tabs {
			display: flex;
			background: #FFFFFF;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				position: relative;

				text {
					font-size: 28rpx;
					color: #666;
				}

				.count {
					margin-left: 4rpx;
				}

				&.active {
					text {
						color: #C8022C;
					}

					.tab-line {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #C8022C;
						border-radius: 2rpx;
					}
				}
			}
		}

		.coupon-container {
			padding: 30rpx;

			.coupon-item {
				display: flex;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				overflow: hidden;

				.left-section {
					width: 200rpx;
					background: #C8022C;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 30rpx;

					.currency {
						font-size: 32rpx;
						margin-top: 10rpx;
					}

					.amount {
						font-size: 72rpx;
						font-weight: bold;
					}
				}

				.right-section {
					flex: 1;
					padding: 20rpx 30rpx;
					position: relative;

					.coupon-title {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 10rpx;
					}

					.coupon-limit {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
					}

					.coupon-date {
						font-size: 24rpx;
						color: #999;
						margin-right: 160rpx;
					}

					.details {
						position: absolute;
						left: 30rpx;
						bottom: 20rpx;
						display: flex;
						align-items: center;

						text {
							font-size: 24rpx;
							color: #999;
						}

						.arrow-down {
							margin-left: 4rpx;
						}
					}

					.use-btn {
						position: absolute;
						right: 30rpx;
						top: 80rpx;
						padding: 10rpx 30rpx;
						background: #C8022C;
						color: #FFFFFF;
						font-size: 26rpx;
						border-radius: 30rpx;

						&:active {
							opacity: 0.9;
						}
					}

					.status-text {
						position: absolute;
						right: 30rpx;
						top: 80rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}

			.no-data {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 60vh;

				.empty-state {
					display: flex;
					flex-direction: column;
					align-items: center;

					.empty-text {
						font-size: 28rpx;
						color: #999;
						margin-bottom: 20rpx;
					}

					.empty-icon {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
		}

		.follow-section {
			padding: 30rpx;

			.follow-content {
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 30rpx;
				display: flex;
				align-items: center;

				.follow-logo {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}

				.follow-text {
					flex: 1;

					.follow-title {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 4rpx;
					}

					.follow-desc {
						font-size: 24rpx;
						color: #666;
					}
				}

				.follow-btn {
					padding: 10rpx 30rpx;
					background: #C8022C;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 30rpx;

					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}
</style>